<template>
	<view>
		<view class="lh123"><text class="tit56">泉州风光</text>
			<view class="smart-padding-wrap">
				<swiper circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration">
					<swiper-item>
						<image src="/static/city1.png" class="l61"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city2.jpg" class="l61"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city3.jpg" class="l61"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city4.jpg" class="l61"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="jqw"></view>
		<view class="lh123"><text class="tit56">泉州介绍</text>
			<text class="tit56">海上丝绸之路起点--泉州</text>
			<view><text class="wz">历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”</text></view>
			<view><text class="wz">著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等</text></view>
			<view><text class="wz">特色文化：拥有<text class="ts">南音、木偶戏</text>和<text class="ts">闽南建筑</text>等丰富的非物质文化遗产</text>
			</view>
			<view class="jqw"></view>
			<text>探索进度：</text>
			<progress :percent="60" show-info />
		</view>
	</view>
	<view class="jqw"></view>
	<view class="lh012">
		<view class="tit56">选择城市</view>
		<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
			:range="multiArray">
			<view>
				{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
			</view>
		</picker>
	</view>
	<view class="ll"></view>
	<view class="lh456"><text class="tit56">泉州宣传</text>
		<view class="media-show">
			<video :src="quanzhou.video" :poster="quanzhou.poster" controls class="city-video"></video>
		</view>
	</view>
	<view class="jqw"></view>
	<view class="lh4567">
		<view class="preference-setting">
			<view class="transport">
				<text>出行方式：</text>
				<radio-group @change="onTransportChange">
					<radio :value="item" v-for="item in transportOptions" :key="item">
						{{item}}
					</radio>
				</radio-group>
			</view>
			<view class="recommend-switch">
				<text>显示推荐景点：</text>
				<switch v-model="showRecommend" />
			</view>
			<view class="explore-radius">
				<text>探索半径：{{radius}}km</text>
				<slider :value="radius" @change="onRadiusChange" min="1" max="20" class="radius-slider" />
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				quanzhou: {
					video: '/static/city-video.mp4',
					poster: '/static/city1.png',

				},
				progress: 60,
				multiArray: [
					['福建省', '江西省'],
					['泉州', '莆田', '福州'],
					['丰泽区', '南安市', '石狮市']
				],
				multiIndex: [0, 0, 0],
				onReady: function(res) {
					this.videoContext = uni.createVideoContext('myVideo')
				},
				transportOptions: ['公交', '自驾', '步行'],
				selectedTransport: '公交',
				indicatorDots: true,
				autoplay: true,
				radius: 12,
				interval: 3000,
				duration: 300
			}
		},
		methods: {
				onRegionChange(e) {
					this.region = e.detail.value;
				},
				onTransportChange(e) {
					this.selectedTransport = e.detail.value;
				},
				onRadiusChange(e) {
					this.radius = e.detail.value;
				},
			},
		};
</script>

<style>
	.lh123 {
		background-color: azure;
		height: 450rpx;
		width: 700rpx;
		margin-left: auto;
		margin-right: auto;
		border-radius: 12px;
	}

	.tit56 {
		font-size: 22px;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10px;
	}

	.l61 {
		width: 100%;
		height: 100%;
	}

	.jqw {
		height: 20rpx;
	}

	.wz {
		font-size: 19rpx;
	}

	.ts {
		color: aqua;
	}

	.lh012 {
		background-color: azure;
		height: 140rpx;
		width: 700rpx;
		margin-left: auto;
		margin-right: auto;
		border-radius: 12px;
	}

	.lh456 {
		background-color: azure;
		height: 550rpx;
		width: 700rpx;
		margin-left: auto;
		margin-right: auto;
		border-radius: 12px;
	}

	.ll {
		height: 40rpx;
	}

	.media-show {
		margin-left: 50rpx;
	}

	.lh4567 {
		background-color: azure;
		height: 350rpx;
		width: 700rpx;
		margin-left: auto;
		margin-right: auto;
		border-radius: 12px;
	}
	.transport,
	.recommend-switch,
	.explore-radius {
	  margin-bottom: 10px;
	}
	.radius-slider {
	  width: 200px;
	}
</style>